@charset "utf-8";

/*
	@名称: reset
	@功能: 重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。
		   功能样式，从常用样式方法中抽离，按需使用，使用前请先阅读 CSS规范 中相关条列。
		   常见动画效果的集合，主要用于效果演示和参考，也可以直接调用。
*/

/* ----------   reset   ---------- */
html,
body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	overflow: hidden;
}
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
	color: #555;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	margin: 0;
	padding: 0;
	font-family: SourceHanSansCN;
	overflow-scrolling: touch;
	-webkit-overflow-scrolling: touch;
	/* color: #121619; */
}

/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

/* HTML5 媒体文件跟 img 保持一致 */
audio,
canvas,
video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

/* 要注意表单元素并不继承父级 font 的问题 */
body,
button,
input,
select,
textarea {
	font: 14px/1 'Microsoft YaHei', '微软雅黑', 'PingFang SC', Arial, sans-serif;
}
input,
select,
textarea {
	font-size: 100%;
}

/* 去掉各Table  cell 的边距并让其边重合 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* IE bug fixed: th 不继承 text-align*/
th,
pre,
code,
kbd,
samp {
	text-align: inherit;
}

/* 去除默认边框 */
fieldset,
img {
	border: 0;
}

/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
	display: block;
}

/* 去掉 firefox 下此元素的边框 */
abbr,
acronym {
	border: 0;
	font-variant: normal;
}

/* 一致的 del 样式 */
del {
	text-decoration: line-through;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
	font-style: normal;
}

/* 去掉列表前的标识, li 会继承 */
/*ol,ul{list-style:none;}*/

/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,
th {
	text-align: left;
}

/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
/*h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}*/
q:before,
q:after {
	content: '';
}

/* 统一上标和下标 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

/* 超链接和按钮鼠标手型 */
a,
button {
	cursor: pointer;
}

/* 默认不显示下划线，保持页面简洁 */
ins,
a {
	text-decoration: none;
}

/* 代码字体 */
code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em;
}

/* 让字体显示正常 */
i,
cite,
em,
var,
address,
dfn {
	font-style: normal;
}

/*去掉浏览器系统默认的触发边框*/
input,
a {
	outline: 0;
}

/* 文本域正常显示 */
textarea {
	overflow: auto;
	resize: none;
}

ul {
	list-style: none;
}
/*radio checkbox*/
.radio,
.checkbox {
	vertical-align: middle;
	margin: -2px 3px 0 0;
	*margin: 0 3px 0 0;
}

/* ----------   function   ---------- */

/* 清除浮动 */
.fn-clear:after {
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	content: '.';
}
.fn-clear {
	zoom: 1;
} /* for IE6 IE7 */

/* ----------   文本选中颜色   ---------- */
::selection {
	background: #10b794;
	color: #fff;
}

::-moz-selection {
	background: #10b794;
	color: #fff;
}

::-webkit-selection {
	background: #10b794;
	color: #fff;
}
/* ----------   animation   ---------- */

/* 淡入 */
.a-fadein {
	-webkit-animation-name: fadein;
	-moz-animation-name: fadein;
	-ms-animation-name: fadein;
	animation-name: fadein;
}
/* define */
/* 淡入 */
@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* 高度 */
.height-enter-active {
    animation: height-in .5s;
  }
  .height-leave-active {
    animation: height-in .5s reverse;
  }
  @keyframes height-in {
    0% {
      height: 100%;
    }
    50% {
        height: 50%;
    }
    100% {
      height: 0;
    }
  }
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
	width: 7px;
	height: 7px;
	background-color: transparent;
	/* background: #f2f4f8; */
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
	/* box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
	/* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
	/* border-radius: 10px; */
	/* background: #f2f4f8; */
	background: transparent;
	/* background: red; */
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(220, 221, 224, .3);
	-webkit-box-shadow: inset 0 0 6px rgba(220, 221, 224, .3);
	background-color: transparent;
	background: rgba(220, 221, 224, .5);
}
/* .el-drawer__wrapper{
	z-index: 99999!important;
} */
/* .v-modal{
	z-index: 3001!important;
} */


/* 特殊的抽屉样式 */
.Editor-drawer__wrapper{
	width: 414px;
	margin: 0;
	left: auto;
	box-shadow:-5px 0 10px -5px rgba(0,0,0,.12);
}

/* 放大缩小动画 */
@keyframes scaleBox {
  0%{
    transform: scale(0.95);
  }
  20%{
    transform: scale(1);
  }
  40%{
    transform: scale(1.05);
  }
  50%{
    transform: scale(1.1);
  }
  60%{
    transform: scale(1.05);
  }
  80%{
    transform: scale(1);
  }
  100%{
    transform: scale(0.95);
  }
}

.bg-fff {
	background: #fff;
}
.bg-f5{
	background: #f5f5f5;
}
.w-full {
	width: 100%;
}
.h-full {
	height: 100%;
}
.flex-row {
	display: flex!important;
	flex-direction: row;
}
.flex-column {
	display: flex!important;
	flex-direction: column;
}
.flex1 {
	flex: 1;
}
.inline-block {
	display: inline-block;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.overflow-y-hidden {
	overflow-y: hidden;
}
.overflow-y-auto {
	overflow-y: auto;
}
.overflow-x-hidden {
	overflow-x: hidden;
}
.overflow-x-auto {
	overflow-x: auto;
}
.overflow-hidden {
	overflow: hidden;
}
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.clearfix {
	overflow: auto;
	zoom: 1;
}
.cursor-pointer{
	cursor: pointer
}
.srcoll-no-bar::-webkit-scrollbar {
	display: none;
}

#youshouqi .el-button--small{
	padding:9px 10px!important;
}
.shake-icon{
	display: inline-block;
	animation-name: shake;
	animation-duration: 2000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes shake {
	0% {
			transform: translateY(0px);
	}
	20% {
		transform: translateY(5px);
	}
	40% {
		transform: translateY(0px);
	}
	60% {
		transform: translateY(0px);
	}
	80% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(0px);
	}
}
